<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>后台管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


  <!-- App favicon -->
  <link rel="shortcut icon" href="assets/images/favicon.ico">

  <!-- App css -->
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="css/icons.min.css" rel="stylesheet" type="text/css" />
  <link href="css/app.min.css" rel="stylesheet" type="text/css" />
  <!-- App js -->
  <script src="/js/vendor.min.js"></script>
  <script src="/js/app.min.js"></script>

  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>

  <script src="echarts.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js">

  </script>

</head>

<body>
<div id="app">
  <!-- Navigation Bar-->
  <header id="topnav">
    <nav class="navbar-custom">

      <div class="container-fluid">
        <ul class="list-unstyled topbar-right-menu float-right mb-0">

          <li class="dropdown notification-list">
            <!-- Mobile menu toggle-->
            <a class="navbar-toggle nav-link">
              <div class="lines">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </a>
            <!-- End mobile menu toggle-->
          </li>



          <li class="dropdown notification-list">
            <a class="nav-link dropdown-toggle nav-user mr-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
              <img src="assets/images/users/2.jpg" alt="user-image" class="rounded-circle">
              <small class="pro-user-name ml-1">
                Admin
              </small>
            </a>
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown ">
              <!-- item-->
              <div class="dropdown-header noti-title">
                <h6 class="text-overflow m-0">欢迎 !</h6>
              </div>

              <!-- item-->
              <a href="adminInfo.html" class="dropdown-item notify-item">
                <i class="fe-user"></i>
                <span>管理员信息</span>
              </a>

              <!-- item-->
              <a href="adminJournal.html" class="dropdown-item notify-item">
                <i class="fe-settings"></i>
                <span>日志</span>
              </a>

              <div class="dropdown-divider"></div>

              <!-- item-->
              <a href="pages-login.html" class="dropdown-item notify-item">
                <i class="fe-log-out"></i>
                <span>退出</span>
              </a>

            </div>
          </li>

        </ul>

        <ul class="list-inline menu-left mb-0">
          <li class="float-left">
            <a href="page-index.html" class="logo">
                                <span class="logo-lg" >
                                    <img src="assets/images/111.png" alt="" height="42">
                                </span>
              <!-- <span class="logo-sm">
                  <img src="assets/images/logo-sm.png" alt="" height="28">
              </span> -->
            </a>
          </li>
          <!--                        <li class="app-search">-->
          <!--                            <form>-->
          <!--                                <h2 style="color: azure;">学 习 养 成 计 划</h2>-->
          <!--                            </form>-->
          <!--                        </li>-->
        </ul>
      </div>

    </nav>
    <!-- end topbar-main -->

    <div class="topbar-menu">
      <div class="container-fluid">
        <div id="navigation">
          <!-- Navigation Menu-->
          <ul class="navigation-menu">

            <li class="has-submenu">
              <a href="page-index.html">
                <i class="fe-airplay"></i>首页</a>
            </li>

            <li class="has-submenu">
              <a href="userQuery.html">
                <i class="fe-user"></i>用户管理</a>
            </li>

            <li class="has-submenu">
              <a href="taskQuery.html">
                <i class="mdi mdi-codepen"></i>任务管理</a>
            </li>

            <li class="has-submenu">
              <a href="tipQuery.html">
                <i class="mdi mdi-brightness-5"></i>心得管理</a>
            </li>



            <li class="has-submenu">
              <a href="chartUser.html"> <i class="mdi mdi-elevation-rise"></i>数据分析</a>
              <ul class="submenu">
                <li>
                  <a href="chartUser.html">用户分析</a>
                </li>
                <li>
                  <a href="chartTask.html">任务分析</a>
                </li>
                <li>
                  <a href="chartTip.html">心得分析</a>
                </li>
                <li>
                  <a href="chartAction.html">单个用户行为分析</a>
                </li>
              </ul>
            </li>



          </ul>
          <!-- End navigation menu -->

          <div class="clearfix"></div>
        </div>
        <!-- end #navigation -->
      </div>
      <!-- end container -->
    </div>
    <!-- end navbar-custom -->
  </header>
  <!-- End Navigation Bar-->

  <div class="wrapper" style="padding-top: 65px;">
    <div class="container-fluid">

      <!-- start page title -->
      <div class="row">
        <div class="col-12">
          <div class="page-title-box">
            <div class="page-title-right">
              <ol class="breadcrumb m-0">
                <li class="breadcrumb-item"><a href="page-index.html">洋葱</a></li>
                <li class="breadcrumb-item"><a href="chartUser.html">用户数量分析</a></li>
              </ol>
            </div>
            <h4 class="page-title">用户数量分析</h4>

            <div class="row">
              <div class="col-xl-3 col-lg-6">
                <div class="card widget-flat">
                  <div class="card-body p-0">
                    <div class="p-3 pb-0">
                      <div class="float-right">
                        <i class="mdi mdi-emoticon-excited text-primary widget-icon"></i>
                      </div>
                      <h5 class="text-muted font-weight-normal mt-0">用户总数</h5>
                      <h3 class="mt-2">3,543</h3>
                    </div>
                    <div id="sparkline1"></div>
                  </div> <!-- end card-body-->
                </div> <!-- end card-->
              </div> <!-- end col-->

              <div class="col-xl-3 col-lg-6">
                <div class="card widget-flat">
                  <div class="card-body p-0">
                    <div class="p-3 pb-0">
                      <div class="float-right">
                        <!--                  <i class="mdi mdi-currency-usd text-danger widget-icon"></i>-->
                        <i class="mdi mdi-android-head text-danger widget-icon"></i>

                      </div>
                      <h5 class="text-muted font-weight-normal mt-0">今日新增用户</h5>
                      <h3 class="mt-2">25,617</h3>
                    </div>
                    <div id="sparkline2"></div>
                  </div> <!-- end card-body-->
                </div> <!-- end card-->
              </div> <!-- end col-->

              <div class="col-xl-3 col-lg-6">
                <div class="card widget-flat">
                  <div class="card-body p-0">
                    <div class="p-3 pb-0">
                      <div class="float-right">
                        <i class=" mdi mdi-approval text-primary widget-icon"></i>
                      </div>
                      <h5 class="text-muted font-weight-normal mt-0">任务总数</h5>
                      <h3 class="mt-2">5,387</h3>
                    </div>
                    <div id="sparkline3"></div>
                  </div> <!-- end card-body-->
                </div> <!-- end card-->
              </div> <!-- end col-->

              <div class="col-xl-3 col-lg-6">
                <div class="card widget-flat">
                  <div class="card-body p-0">
                    <div class="p-3 pb-0">
                      <div class="float-right">
                        <i class="mdi mdi-eye-outline text-danger widget-icon"></i>
                      </div>
                      <h5 class="text-muted font-weight-normal mt-0">心得发布数</h5>
                      <h3 class="mt-2">74,315</h3>
                    </div>
                    <div id="sparkline4"></div>
                  </div> <!-- end card-body-->
                </div> <!-- end card-->
              </div> <!-- end col-->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-xl-8">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">用户总人数分析</h4>

                    <div id="main1" style="width: 600px;height:400px;"></div>

                  </div>
                </div>
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">用户总人数分析</h4>

                    <div id="main2" style="width: 600px;height:400px;"></div>

                  </div>
                </div>
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">用户总人数分析</h4>

                    <div id="main3" style="width: 600px;height:400px;"></div>

                  </div>
                </div>


              </div>
              <div class="col-xl-4">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">高级市场</h4>

                    <canvas id="doughnut1" height="610" class="mt-4"></canvas>

                  </div>
                </div>
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">高级市场</h4>

                    <canvas id="doughnut2" height="610" class="mt-4"></canvas>

                  </div>
                </div>


              </div>
            </div>
            <!-- end row -->

          </div>
        </div>
      </div>
      <!-- end page title -->


    </div> <!-- end container -->
  </div>
  <!-- end wrapper -->
  <!--        此处编辑主要内容：-->







  <!-- Footer Start -->
  <footer class="footer">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          YangCong Admin &copy; 2021 - tecms.net
        </div>
        <div class="col-md-6">
          <div class="text-md-right footer-links d-none d-sm-block">
            <a href="#">关于我们</a>
            <a href="#">帮助</a>
            <a href="#">联系我们</a>
          </div>
        </div>
      </div>
    </div>
  </footer>        <!-- end Footer -->



</div>


</body>
</html>
<script>
  var vm = new Vue({
    el:"#app",
    data:{
      mymenus:[

      ]
    },
    methods:{},
    mounted(){
      _this = this
      axios.get('js/MenuInfo.json')
              .then(function (response) {
                var str = response.data
                str = eval('('+ str +')');
                _this.mymenus = str;
                console.log(_this.mymenus);

              })
              .catch(function (error) {
                console.log(error);
              })
    }
  })
</script>

<script type="text/javascript">
  $(function(){
    var myCharts=echarts.init(document.getElementById('main1'));
    myCharts.setOption({
      title:{
        // text:'用户总人数柱状图',
        // textStyle:{
        //     fontWeight:'lighter',
        //     fontSize:12
        // }
      },
      toolbox: {
        show: true,
        feature: {
          magicType: { type: ['bar','line', ] },//转换为折线图
          restore: {},//重置
          dataView: { readOnly: false },       //查看数据
          saveAsImage: {}                      //保存为图片
        }
      },
      xAxis : {
        data : []

      },
      yAxis : {

      },
      series : [
        {
          name:'日新建任务总数',
          type:'bar',
          data:[]
        }
      ]
    });
    //加载时显示loading动画
    myCharts.showLoading();
    //放x轴值的日期的数组
    var createDate=[];
    //放y轴值的创建任务数量的数组
    var usersum=[];
    //利用ajax从后台给数组存值
    $.ajax({
      type: "get",
      url: "/user/all",     //请求发送到Controller list处
      dataType: "json",        //返回数据形式为json
      success: function (data) {
        //请求成功时执行该函数内容，result即为服务器返回的json对象
        $(data).each(function(i,e){
          console.log("2")
          createDate.push(e.createDate);    //取出创建任务日期并存入数组
          console.log("3")
          usersum.push(e.usersum);     //取出每日创建的任务数并存入数组
        });
        console.log("1")
        myCharts.hideLoading();    //隐藏加载动画
        myCharts.setOption({        //加载数据图表
          xAxis: {
            data: createDate
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '日新建任务总数',
            type:'bar',
            barWidth: '30%',
            data: usersum,
            color:"pink", //柱状图颜色
          }]
        });
      },
      error: function (errorMsg) {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        myCharts.hideLoading();
      }
    })
  });
</script>

